<div class="shadow">
    <div class="spread">
        <div class="head">
            <span class="close">x</span>
            <p>您的购物车</p>
            <a href=""> <span class="iconfont icon-gwc"></span></a>
            <div class="line"></div>
        </div>
        <div class="showgoods">
            <ul>

            </ul>
        </div>
        <div class="footer">
            <p><span>配送费用 (顺丰包邮)</span><span>￥ 0</span></p>
            <p></p>
            <p><span>累计</span><span class="total">0</span><span>￥ </span></p>
            <p class="dw">前往结账</p>
        </div>
    </div>
</div>


<script>

    var total = 0;
    var phone = getCookie("phone");
    var html = "";
    $(document).on("click", ".icon-gwc", function () {
        $(".shadow").css({ display: "block" });

    })
    if (phone) {
        searchShoppingCarByUser({ phone }).then(reslut => {
            console.log(phone);
            var { status, data } = reslut
            if (status) {
                data.forEach(({ id, gid, buyNum, goodsName, goodsPrice, bigPicList }) => {
                    html += `
                <li class="data-id" data-id=${id}>
                    <div class="goodsMsg">
                        <div class="left"><img src="${bigPicList[0]}" alt=""></div>
                        <div class="content">
                            <p><a href="">${goodsName}</a></p>
                            <p><span class="number1">${buyNum}</span><span>x ￥</span> <span class="price">${goodsPrice}</span></p>
                            <p><span></span><span>40MM</span></p>
                        </div>
                        <div class="right">
                            <span class="iconfont icon-lajitong"></span>
                            <span class="iconfont icon-jian"></span>
                            <input type="text" name="" id="" class="number" value="${buyNum}" readonly=“readonly”>
                            <span class="iconfont icon-jia"></span>
                        </div>

                    </div>

                </li>
                `
                    total += buyNum * goodsPrice;
                })

                $(".showgoods ul").html(html);
                $(".total").text(total)
            }
        })
    }

    $(document).on("click", ".icon-gwc", function () {
        $(this).parents(".shadow").css({ display: "black" });
        this.top = document.documentElement.scrollTop;
        document.body.style.position = 'fixed';
        document.body.style.height = '100vh';
        document.body.style.overflow = 'hidden';
        document.body.style.top = -+this.top + 'px';

    })
    $(document).on("click", ".close", function () {
        $(this).parents(".shadow").css({ display: "none" });
        document.body.style.position = 'static';
        document.body.style.height = 'auto';
        document.body.style.overflow = 'auto';
        window.scrollTo(0, this.top);
    })
    $(document).on("click", ".icon-lajitong", function () {
        var id = $(this).parents(".data-id").attr("data-id")
        var flag = del(id)
        if (flag) {
            $(this).parents("li").remove();
            refresh();
        }
    })
    $(document).on("click", ".icon-jian", function () {
        var reduce = $(this).siblings(".number").attr("value") * 1
        var id = $(this).parents(".data-id").attr("data-id")

        console.log($(".data-id").attr("data-id"));
        if (reduce >= 2) {
            reduce = reduce - 1
            $(this).siblings(".number").attr("value", reduce).parents("li").find(".number1").text(reduce)
            refresh();
            var buyNum = $(this).parents(".data-id").find(".number1").text()
            update(id, buyNum)

        } else if (reduce <= 1) {
            var flag = del(id)
            if (flag) {
                reduce = reduce - 1
                $(this).parents("li").remove();
                refresh();
            }
        }
    })
    $(document).on("click", ".icon-jia", function () {
        var id = $(this).parents(".data-id").attr("data-id")
        var add = $(this).siblings(".number").attr("value") * 1 + 1
        $(this).siblings(".number").attr("value", add).parents("li").find(".number1").text(add)
        var buyNum = $(this).parents(".data-id").find(".number1").text()
        refresh();
        update(id, buyNum)
    })

    function del(id) {
        // console.log(id);
        return deleteShoppingCarById({ id }).then((result) => {
            var { status, detail } = result
            if (status) {
                refresh();
                return true
            } else {
                return false
            }
        })
    }
    function refresh() {
        var total = 0
        $(".showgoods li").each(function () {
            var number = $(this).find(".number").attr("value") * 1
            var price = $(this).find(".price").text() * 1
            total += number * price
        })
        $(".total").text(total.toFixed(2));
    }
    function update(id, buyNum) {
        updateGradeById({ id, buyNum }).then((reslut) => {
            var { status } = reslut
            if (status) {
                console.log(1);
            }
        })
    }

</script>

</html>